<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品分类管理 - ubike</title>
    <link rel="stylesheet" href="../styles/styles-main.css">
    <link rel="stylesheet" href="../styles/modules.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../modules/module-loader.js"></script>
    <script src="../modules/core-modules.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', async function() {
            try {
                await moduleLoader.loadModules([
                    ['api-client', '../scripts/api-client.js'],
                    ['navbar-main', '../scripts/navbar-main.js'],
                    ['sidebar-manager', '../scripts/sidebar-manager.js']
                ]);
                
                // 初始化分类管理
                initCategoryManager();
            } catch (error) {
                console.error('模块加载失败:', error);
            }
        });
    </script>
    <style>
        .category-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
        }
        
        .category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #007bff;
        }
        
        .category-title {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }
        
        .category-actions {
            display: flex;
            gap: 15px;
        }
        
        .category-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .category-list-section {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .category-form-section {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .category-list {
            max-height: 500px;
            overflow-y: auto;
        }
        
        .category-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            transition: background 0.2s;
        }
        
        .category-item:hover {
            background: #f8f9fa;
        }
        
        .category-item.active {
            background: #e3f2fd;
            border-left: 3px solid #007bff;
        }
        
        .category-info {
            flex: 1;
        }
        
        .category-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        
        .category-meta {
            font-size: 12px;
            color: #666;
        }
        
        .category-actions-small {
            display: flex;
            gap: 8px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        .btn-primary {
            background: #007bff;
            color: white;
        }
        
        .btn-primary:hover {
            background: #0056b3;
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #545b62;
        }
        
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c82333;
        }
        
        .btn-sm {
            padding: 4px 8px;
            font-size: 12px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #333;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        .form-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 20px;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }
        
        .empty-state-icon {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div id="navbar-container"></div>
    
    <div class="main-container">
        <div id="sidebar-container"></div>
        
        <main class="main-content">
            <div class="category-container">
                <div class="category-header">
                    <h1 class="category-title">📂 产品分类管理</h1>
                    <div class="category-actions">
                        <button class="btn btn-secondary" onclick="window.history.back()">
                            <i class="fas fa-arrow-left"></i> 返回产品管理
                        </button>
                    </div>
                </div>
                
                <div class="category-content">
                    <div class="category-list-section">
                        <h3>分类列表</h3>
                        <div class="category-list" id="categoryList">
                            <!-- 分类列表将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <div class="category-form-section">
                        <h3 id="formTitle">添加新分类</h3>
                        <form id="categoryForm">
                            <input type="hidden" id="categoryId">
                            
                            <div class="form-group">
                                <label for="categoryName">分类名称 *</label>
                                <input type="text" id="categoryName" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="categorySlug">分类标识 *</label>
                                <input type="text" id="categorySlug" required>
                                <small style="color: #666;">用于URL的英文标识，如：mountain-bike</small>
                            </div>
                            
                            <div class="form-group">
                                <label for="categoryDescription">分类描述</label>
                                <textarea id="categoryDescription" placeholder="请输入分类描述..."></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="categoryParent">父级分类</label>
                                <select id="categoryParent">
                                    <option value="">无父级分类</option>
                                    <!-- 父级分类选项将通过JavaScript动态生成 -->
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="categoryStatus">状态</label>
                                <select id="categoryStatus">
                                    <option value="active">启用</option>
                                    <option value="inactive">禁用</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="categoryImage">分类图片</label>
                                <input type="file" id="categoryImage" accept="image/*">
                                <div id="imagePreview" style="margin-top: 10px;"></div>
                            </div>
                            
                            <div class="form-actions">
                                <button type="button" class="btn btn-secondary" onclick="resetForm()">重置</button>
                                <button type="submit" class="btn btn-primary">保存分类</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <script>
        // 分类管理功能
        let categories = [];
        let currentCategoryId = null;
        
        function initCategoryManager() {
            loadCategories();
            setupEventListeners();
        }
        
        function loadCategories() {
            // 模拟加载分类数据
            categories = [
                { id: 1, name: '山地自行车', slug: 'mountain-bike', description: '专业山地骑行', parent_id: null, status: 'active', product_count: 15 },
                { id: 2, name: '公路自行车', slug: 'road-bike', description: '高速公路骑行', parent_id: null, status: 'active', product_count: 12 },
                { id: 3, name: '城市自行车', slug: 'city-bike', description: '城市通勤使用', parent_id: null, status: 'active', product_count: 8 },
                { id: 4, name: '电动自行车', slug: 'electric-bike', description: '电动助力骑行', parent_id: null, status: 'active', product_count: 10 },
                { id: 5, name: '儿童自行车', slug: 'kids-bike', description: '儿童专用自行车', parent_id: null, status: 'active', product_count: 6 }
            ];
            
            renderCategoryList();
            renderParentOptions();
        }
        
        function renderCategoryList() {
            const container = document.getElementById('categoryList');
            
            if (categories.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">📂</div>
                        <h3>暂无分类数据</h3>
                        <p>请添加第一个产品分类</p>
                    </div>
                `;
                return;
            }
            
            container.innerHTML = categories.map(category => `
                <div class="category-item ${currentCategoryId === category.id ? 'active' : ''}" 
                     onclick="selectCategory(${category.id})">
                    <div class="category-info">
                        <div class="category-name">${category.name}</div>
                        <div class="category-meta">
                            标识: ${category.slug} | 产品: ${category.product_count}个 | 状态: ${category.status === 'active' ? '启用' : '禁用'}
                        </div>
                    </div>
                    <div class="category-actions-small">
                        <button class="btn btn-sm btn-secondary" onclick="editCategory(${category.id}, event)">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deleteCategory(${category.id}, event)">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            `).join('');
        }
        
        function renderParentOptions() {
            const select = document.getElementById('categoryParent');
            select.innerHTML = '<option value="">无父级分类</option>' + 
                categories.filter(cat => cat.parent_id === null).map(cat => 
                    `<option value="${cat.id}">${cat.name}</option>`
                ).join('');
        }
        
        function selectCategory(categoryId) {
            currentCategoryId = categoryId;
            renderCategoryList();
        }
        
        function editCategory(categoryId, event) {
            event.stopPropagation();
            const category = categories.find(cat => cat.id === categoryId);
            if (category) {
                document.getElementById('formTitle').textContent = '编辑分类';
                document.getElementById('categoryId').value = category.id;
                document.getElementById('categoryName').value = category.name;
                document.getElementById('categorySlug').value = category.slug;
                document.getElementById('categoryDescription').value = category.description || '';
                document.getElementById('categoryParent').value = category.parent_id || '';
                document.getElementById('categoryStatus').value = category.status;
                
                currentCategoryId = categoryId;
                renderCategoryList();
            }
        }
        
        function deleteCategory(categoryId, event) {
            event.stopPropagation();
            if (confirm('确定要删除这个分类吗？此操作不可恢复。')) {
                categories = categories.filter(cat => cat.id !== categoryId);
                renderCategoryList();
                renderParentOptions();
                resetForm();
                alert('分类删除成功');
            }
        }
        
        function setupEventListeners() {
            document.getElementById('categoryForm').addEventListener('submit', function(e) {
                e.preventDefault();
                saveCategory();
            });
            
            // 自动生成slug
            document.getElementById('categoryName').addEventListener('input', function() {
                const name = this.value;
                const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
                document.getElementById('categorySlug').value = slug;
            });
        }
        
        function saveCategory() {
            const formData = new FormData(document.getElementById('categoryForm'));
            const categoryId = formData.get('categoryId');
            
            if (categoryId) {
                // 编辑现有分类
                const index = categories.findIndex(cat => cat.id == categoryId);
                if (index !== -1) {
                    categories[index] = {
                        ...categories[index],
                        name: formData.get('categoryName'),
                        slug: formData.get('categorySlug'),
                        description: formData.get('categoryDescription'),
                        parent_id: formData.get('categoryParent') || null,
                        status: formData.get('categoryStatus')
                    };
                }
            } else {
                // 添加新分类
                const newCategory = {
                    id: Math.max(...categories.map(cat => cat.id)) + 1,
                    name: formData.get('categoryName'),
                    slug: formData.get('categorySlug'),
                    description: formData.get('categoryDescription'),
                    parent_id: formData.get('categoryParent') || null,
                    status: formData.get('categoryStatus'),
                    product_count: 0
                };
                categories.push(newCategory);
            }
            
            renderCategoryList();
            renderParentOptions();
            resetForm();
            alert('分类保存成功');
        }
        
        function resetForm() {
            document.getElementById('categoryForm').reset();
            document.getElementById('formTitle').textContent = '添加新分类';
            document.getElementById('categoryId').value = '';
            currentCategoryId = null;
            renderCategoryList();
        }
        
        function navigateToCategoryManager() {
            window.location.href = 'category-manager.html';
        }
    </script>
</body>
</html>